<template>
    <div class="cartcontrol">
      <div class="cart-decrease el-icon-remove-outline" v-show="goods.count>0"
           @click.stop="decreaseCart" transition="move">
        <span class="inner icon-remove_circle_outline"></span>
      </div>
      <input type="text" class="cart-count" v-show="goods.count>0" v-model="goods.count">
      <div class="cart-add el-icon-circle-plus-outline" @click.stop="addCart"></div>
    </div>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue'
export default {
  data () {
    return {}
  },
  props: {
    goods: {
      type: Object
    }
  },
  methods: {
    addCart (event) {
      console.log('click')
      if (!this.goods.count) {
        Vue.set(this.goods, 'count', 1)
      } else {
        this.goods.count++
      }
      this.$emit('cartAdd', event.target)
    },
    decreaseCart () {
      if (this.goods.count) {
        this.goods.count--
      }
    }
  }
}
</script>

<style lang="less">
  .cartcontrol {
    font-size: 0;
    width: 120px;
    display: inline-block;
  }

  .cart-decrease, .cart-add {
    display: inline-block;
    padding: 6px;
    transition: all 0.4s linear;
  }
  .cart-decrease, .cart-add .inner {
    display: inline-block;
    line-height: 24px;
    font-size: 24px;
    color: #6AA7E3;
    transition: all 0.4s linear;
  }

  .cart-decrease, .cart-add .inner.move-transition {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .inner {
    transform: rotate(0);
  }
  .inner.move-enter, .inner.move-leave-to {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }

  .inner {
    transform: rotate(180deg);
  }

  .cart-count {
    display: inline-block;
    vertical-align: top;
    width: 45px;
    padding-top: 6px;
    line-height: 24px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    background: transparent;
    border: none;
  }

  .cart-add {
    padding: 6px;
    font-size: 24px;
    line-height: 24px;
    color: #6AA7E3;
  }

</style>
